<!--     这个组件主要使用在新增注册证部分    -->
<!--     用来上传   <<<单个pdf文件>>>>     -->
<!--     或者你也可以在别的地方使用    -->
<!--     但是不要删除原来的代码，你可以加参数等    -->
<!--     但是不要删不要删不要删！！！    -->
<!--     改的时候考虑一下会不会影响其他页面的功能！！    -->
<!--     把功能给我改坏了，我会去找你的！！！！    -->

<template>
  <div class="upload-file-pdf-box">
    <div>
      <div v-if="pdfsurlstr" class="dialog-upload">
        <div class="pdfleft">
          <i class="iconfont iconpdf" />
          <p>{{ fileName }}</p>
        </div>
        <div class="pdfright">
          <div class="btn-box">
            <el-button
              size="mini"
              type="text text-primary"
              @click.stop="previewpdf"
              >预览</el-button
            >
            <el-upload
              action="string"
              :show-file-list="false"
              accept="application/pdf"
              :http-request="toRequest"
              fit="scale-down"
            >
              <el-button size="mini" type="text text-primary"
                >重新上传</el-button
              >
            </el-upload>
          </div>
        </div>
      </div>
      <!-- 上传 -->
      <div v-else class="upload-box">
        <el-upload
          action="string"
          :show-file-list="false"
          accept="application/pdf"
          :http-request="toRequest"
          fit="scale-down"
        >
          <div class="tip-box">
            <div class="tip-uplader">
              <i class="el-icon-plus avatar-uploader-icon" />
            </div>
            <div>（支持PDF格式文件上传，文件限制20M以内）</div>
          </div>
        </el-upload>
      </div>
    </div>
  </div>
</template>

<script>
import {fileUpload} from '../../const/api.js'
// 文件上传限制 ------- 图片类型
const pdfLimit = 'application/pdf'
export default {
  name: 'PictureUpload',
  props: {
    // 跟单独调用没有关系，该值为了配合表单组件使用
    keystr: {
      type: String,
      default: () => ''
    },
    // PDF
    pdftitle: {
      type: String,
      default: () => ''
    },
    imgsrc: {
      type: String,
      default: () => ''
    }
  },

  data() {
    return {
      fileName: '', // PDF名称
      // 该值为了配合表单组件使用
      key: this.keystr || '',
      pdfsurlstr: this.imgsrc || ''
    }
  },

  methods: {
    //   预览
    previewpdf() {
      this.$pdfViewer({url: this.pdfsurlstr, title: '注册证'})
    },
    toRequest(data) {
      // 图片拦截
      const isPdf = data.file.type.includes(pdfLimit)
      if (!isPdf) {
        this.$message.error('上传文件只能是PDF格式!')
        return false
      }
      const isLt20M = data.file.size / 1024 / 1024 < 20
      if (!isLt20M) {
        this.$message.error('上传文件大小不能超过 20MB!')
        return false
      }
      this.fileName = data.file.name
      // 发起请求
      let fd = new FormData()
      fd.append('file', data.file)
      this.$axios({
        method: 'post',
        url: fileUpload,
        headers: {'Content-Type': 'multipart/form-data'},
        data: fd
      }).then(res => {
        this.$message({type: 'success', message: '上传成功'})
        // 赋值上传后的地址给文档
        this.pdfsurlstr = res.data.payload
        this.$emit('ReturnImgUrl', this.pdfsurlstr, this.key, this.fileName)
      })
    }
  },

  watch: {
    imgsrc: {
      immediate: true,
      handler(val) {
        this.pdfsurlstr = val
      }
    },
    pdftitle: {
      immediate: true,
      handler(val) {
        this.fileName = val
      }
    }
  }
}
</script>

<style lang="less">
.upload-file-pdf-box {
  .dialog-upload {
    border: 1px solid #cdd2dc;
    width: 220px;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    padding-top: 20px;

    .pdfleft {
      height: 80px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      i {
        color: #ccc;
        font-size: 25px;
      }
      p {
        width: 150px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    }

    .pdfright {
      .btn-box {
        display: flex;
        justify-content: space-around;
      }
    }
  }
  .upload-box {
    border: 1px solid #cdd2dc;
    width: 210px;
    font-size: 12px;
    padding: 10px 2px;
    // color: #aaa;
    .tip-box {
      display: flex;
      flex-direction: column;
      justify-items: center;
      align-items: center;
      .tip-uplader {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 1px solid #cdd2dc;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>
